<template>
	<view>
		<navbar>
			<u-search placeholder="输入资源名称进行搜索" @blur="search" v-model="searchval" @custom="search"></u-search>
		</navbar>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<view style="height: 30px;display: flex;font-size: 14px;align-items: center;background-color: white;">
			<p style="margin: 0 10px;">类型:</p>
			<u-radio-group v-model="current" placement="row">
				<u-radio :customStyle="{marginRight: '10px'}" v-for="(item, index) in option" :key="index"
					:label="item.text" :name="item.value">
				</u-radio>
			</u-radio-group>
		</view>
		<view v-if="history.length!=0&&!show">
			<p style="font-size: 14px;margin:5px 10px;display: flex;justify-content: space-between;align-items: center;">
				历史记录<u-icon name="trash" @click="dele" size="20"></u-icon></p>
			<scroll-view class="scroll-view_H" scroll-x="true">
				<p v-for="item in history" class="scroll-view-item_H" @click="()=>{search(item);searchval=item}">{{item}}</p>
			</scroll-view>
		</view>
		<ad adpid="1523599100" v-show="adshow" style="margin-top: 5px;"></ad>
		<unicloud-db v-if="show" loadtime="manual" ref="udb" :page-size="5" orderby="time desc"
			v-slot:default="{data, loading, error,hasMore, options}" :collection="collection">
			<view v-if="hasMore||data.length>0" v-for="(item,index ) in data" :key="index">
				<u-transition :show="true">
					<articleitem v-if="current==1" :data="item" :info="item.user_id[0]"></articleitem>
					<share_item  v-if="current==0" :data="item" :info="item.user_id[0]"></share_item>
				</u-transition>
			</view>
			<u-loadmore v-if="loading" loadingText="拼命加载中" status="loading" />
			<view v-if="data.length==0&&!loading&&!hasMore" style="text-align: center;margin-top: 20px;">
				<u-empty mode="search" text="没有搜到内容~">
				</u-empty>
			</view>
		</unicloud-db>
	</view>
</template>

<script>
	const db = uniCloud.database();
	export default {
		onLoad() {
			var that = this
			uni.getStorage({
				key: 'search_history',
				success(res) {
					if (res.data != null) {
						that.history = res.data
					}
				}
			});
		},
		onReachBottom() {
			this.$refs.udb.loadMore()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		watch:{
			current(e){
				if(this.show){
					this.$refs.udb.clear()
					this.search(this.searchval)
				}
			}
		},
		methods: {
			dele() {
				this.history = []
				uni.removeStorage({
					key: 'search_history'
				});
			},
			search(e) {
				this.searchval = e
				this.show = true
				if (e == null || e == "") {
					return null
				}
				if (this.history.indexOf(e) == -1) {
					this.history.unshift(e)
					uni.setStorage({
						key: 'search_history',
						data: this.history
					});
				}
				if(this.current==0){
					this.collection[0] = db.collection('item').where(`pass==true&&(/${e}/.test(title)||/${e}/.test(content))`)
						.field("title,type,size,user_id,icon,ip,down,time,content").getTemp()
				}else if(this.current==1){
					this.collection[0]=db.collection('requirement').where(`/${e}/.test(title)||/${e}/.test(content)`).field("title,content,image,user_id,browse,time,price").getTemp()
				}
				this.adshow = false
				this.$nextTick(() => {
					this.$refs.udb.loadData({
						clear: true
					})
				})
			}
		},
		data() {
			return {
				scrollTop:0,
				option: [{
					text: '分享',
					value: 0
				}, {
					text: '需求',
					value: 1
				}],
				current: 0,
				searchval: null,
				adshow: true,
				collection: [null,db.collection('uni-id-users').field("_id,nickname,avatar,identity,vip").getTemp()],
				show: false,
				history: []
			};
		}
	}
</script>

<style lang="scss">
	.scroll-view_H {
		margin-top: 10px;
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		text-align: center;
		padding: 5px 10px;
		background-color: #eeeeee;
		margin: 0 5px;
		color: #909399;
		font-size: 14px;
		border-radius: 5px;
	}
</style>